<template>
  <div>
    <el-dialog
      title="采购员信息"
      :visible.sync="visible"
      width="50%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              头像
            </template>
            <el-image
              style="width: 45px; height: 45px"
              :src="otherUserInfo.avatar"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              账号编号
            </template>
            {{ otherUserInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              用户名
            </template>
            {{ otherUserInfo.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              手机号
            </template>
            {{ otherUserInfo.mobilePhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets" />
              组织名称
            </template>
            {{ otherUserInfo.organizeName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              组织描述
            </template>
            {{ otherUserInfo.organizeDescription }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              账号角色
            </template>
            {{ otherUserInfo.role }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              角色描述
            </template>
            {{ otherUserInfo.roleDescription }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-default-prop
    info: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      otherUserInfo: {
        avatar: "",
        id: "",
        username: "",
        mobilePhone: "",
        organizeName: "",
        organizeDescription: "",
        role: "",
        roleDescription: "",
      },
    };
  },
  computed: {
    role() {
      return res.join(",");
    },
  },
  methods: {
    open() {
      console.log("@@@@1212",this.info);
      this.otherUserInfo.username = this.info.username;
      this.otherUserInfo.avatar = this.info.avatar;
      this.otherUserInfo.id = this.info.id;
      this.otherUserInfo.mobilePhone = this.info.mobilePhone;
      this.otherUserInfo.organizeName = this.info.organization.organizeName;
      this.otherUserInfo.organizeDescription = this.info.organization.description;
      this.otherUserInfo.role = this.info.role.role;
      this.otherUserInfo.roleDescription = this.info.role.description;
    },
    cancel() {
      this.initotherUserInfo();
      this.$emit("cancel");
    },
    initotherUserInfo() {
      this.otherUserInfo = {
        avatar: "",
        id: "",
        username: "",
        mobilePhone: "",
        organizeName: "",
        organizeDescription: "",
        role: "",
        roleDescription: "",
      };
    },
  },
};
</script>

<style>
</style>
